<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>键盘事件</title>
        <script
            type="text/javascript"
            src="../vue.js"
        ></script>
    </head>
    <body>
        <!--键盘事件：
        1.vue中常见的案件别名：enter，delete，esc，space，tab（焦点转移，所以使用keydown），up，down，left，right(也可以用开头大写）
        2.console.log(e.key,e.keyCode)查找对应按键的名称和编码，对于驼峰式命名一定要转化为小写，且单词之间加-
        3.系统修饰键-特殊键：ctrl，shift，Alt，meta(win键)
        以ctrl为例：配合keyup使用则需要按下ctrl，同时在加另外一个任意键，释放，则成功；配合keydown使用则不需要

        -->
        <div id="part1">
            <h1>hello,{{name}}</h1>
            <input type="text" placeholder="按下回车键提示输入" @keyup.enter="show">
            <input type="text" placeholder="按下回车键提示输入" @keyup.13="show">    <!--不推荐-->
            <input type="text" placeholder="按下Caps Lock提示输入" @keyup.caps-lock="show">
            <input type="text" placeholder="按下Ctrl提示输入（keyup+任意键）" @keyup.ctrl="show">
            <input type="text" placeholder="按下Ctrl提示输入（keyup+y）" @keyup.ctrl.y="show">
            <input type="text" placeholder="按下Ctrl提示输入（keydown）" @keydown.ctrl="show">
            <input type="text" placeholder="按下m提示输入" @keydown.m="show">
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;
            //自定义键盘
            Vue.config.keyCodes.m = 77;
            const vm = new Vue({
                data() {
                    return {
                        name: "Marina",
                        address: 'xxx',
                    }
                },
                methods: {
                    show(e) {
                        // console.log(e.key,e.keyCode)  //判断每个按键的code数值
                        // if (e.keyCode !== 13) return
                        console.log(e.target.value)
                    }
                }

            })
            vm.$mount("#part1");
        </script>
    </body>
</html>